<html>
  <head>
    <script type="text/javascript" src="../colorpicker.js"></script>
    <style type="text/css">
      #picker { width: 200px; height: 200px }
      #slider { width: 30px; height: 200px }
    </style>
  </head>
  <body>

    <div id="picker"></div>
    <div id="slider"></div>

    <script type="text/javascript">

      ColorPicker(

        document.getElementById('slider'),
        document.getElementById('picker'),

        function(hex, hsv, rgb) {
          console.log(hsv.h, hsv.s, hsv.v);         // [0-359], [0-1], [0-1]
          console.log(rgb.r, rgb.g, rgb.b);         // [0-255], [0-255], [0-255]
          document.body.style.backgroundColor = hex;        // #HEX
        });

    </script>
  </body>
</html>
